﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
    <TITLE>询价书明细</TITLE>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <LINK href="../js/style.css" rel=stylesheet>
</HEAD>
<BODY>
<DIV id=overDiv style="Z-INDEX: 1; POSITION: absolute"></DIV>
<CENTER>
    <DIV id="app">
        <FORM name=form action="" method=post>
            <H2><FONT color=#0070c0>询价书明细</FONT></H2>
            <B><FONT color=#0070c0>询价书明细</FONT></B>
            <A onclick="window.open('../help/Help.asp?Value=询价书明细信息','child','status=NO,scrollbars=yes,toolbar=no,menubar=no,location=no,left=200,top=100,width=700,height=400')" href="javascript:void(null)">
                <IMG alt=帮助 src="../img/help_a.gif" border=1>
            </A>
            <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE cellSpacing=1 cellPadding=3 width="100%" border=1>
                            <TBODY>
                            <TR bgColor=#ffffff>

                            </TR>
                            <TR class=t1>
                                <TD noWrap width="20%">询价书编号</TD>
                                <TD class=t2 noWrap>{{ enquiry.enquiryNo }}</TD>
                                <TD noWrap width="20%">询价书名称</TD>
                                <TD class=t2 noWrap>{{ enquiry.enquiryName }}</TD>
                            </TR>
                            <TR class=t1>
                                <TD noWrap width="20%">单位</TD>
                                <TD class=t2 noWrap>{{ enquiry.company }}</TD>
                                <TD noWrap width="20%">联系人</TD>
                                <TD class=t2 noWrap>{{ enquiry.contactPerson }}</TD>
                            </TR>
                            <TR class=t1>
                                <TD noWrap width="20%">联系地址</TD>
                                <TD class=t2 noWrap>{{ enquiry.address }}</TD>
                                <TD noWrap width="20%">联系电话</TD>
                                <TD class=t2 noWrap>{{ enquiry.phone }}</TD>
                            </TR>
                            <TR class=t1>
                                <TD noWrap width="20%">联系传真</TD>
                                <TD class=t2 noWrap>{{ enquiry.fax }}</TD>
                                <TD noWrap width="20%">邮编</TD>
                                <TD class=t2 noWrap>{{ enquiry.postcode }}</TD>
                            </TR>
                            <TR class=t1>
                                <TD noWrap width="20%">Email</TD>
                                <TD class=t2 noWrap>{{ enquiry.email }}</TD>
                                <TD noWrap width="20%">报价截止时间</TD>
                                <TD class=t2 noWrap>{{ formatDate(enquiry.deadline) }}</TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
            <TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ffffff borderColorLight=#ffffff border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE cellSpacing=1 cellPadding=3 width="100%" border=0>
                            <TBODY>
                            <TR>
                                <TD><B>我公司欲采购下述物资，如贵单位有兴趣，可参与网上报价。详细物资情况如下：</B></TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
            <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE cellSpacing=1 cellPadding=3 width="100%" border=1>
                            <TBODY>
                            <TR class=t1>
                                <TD noWrap align=middle>物资编码</TD>
                                <TD noWrap align=middle>物资名称</TD>
                                <TD noWrap align=middle>数量</TD>
                                <TD noWrap align=middle>计量单位</TD>
                                <TD noWrap align=middle>交货期</TD>
                                <TD noWrap align=middle>协议价格（元）</TD>
                                <TD noWrap align=middle>预算总金额（元）</TD>
                                <TD noWrap align=middle>计划价（元/不含税）</TD>
                            </TR>
                            <TR class=t2>
                                <TD>{{ quote.materialCode }}</TD>
                                <TD>{{ quote.materialName }}</TD>
                                <TD>{{ quote.amount }}</TD>
                                <TD>{{ quote.measureUnit }}</TD>
                                <TD>{{ formatDate(quote.endDate) }}</TD>
                                <TD>无</TD>
                                <TD>{{ quote.sumPrice }}</TD>
                                <TD>{{ quote.unitPrice }}</TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
            <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE cellPadding=3 cellSpacing=1 border=1 width="100%">
                            <TBODY>
                            <TR class=t2>
                                <TD noWrap>报价有效期</TD>
                                <TD>{{ formatDate(enquiry.validityPeriod) }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD noWrap>询价说明</TD>
                                <TD style="width:100%"><TEXTAREA name=textarea rows=4 readonly style="width:100%">{{ enquiry.remarks }}</TEXTAREA></TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
            <CENTER>
                <DIV align=left><H4>供应商报价列表(温馨提示：如果没有供应商报价，则以下内容没有)</H4></DIV>
                <TABLE cellSpacing=1 cellPadding=3 width="100%" border=1>
                    <TBODY>
                    <TR class="t1">
                        <TD noWrap align="middle">选择</TD>
                        <TD noWrap align="middle">序号</TD>
                        <TD noWrap align="middle">供应商名称</TD>
                        <TD noWrap align="middle">总额</TD>
                        <TD noWrap align="middle">截止时间</TD>
                    </TR>
                    <!-- 使用 v-for 来动态生成行 -->
                    <TR v-for="quote in quotes" :key="quote.id" class="t2">
                        <TD align="middle">
                            <!-- 使用 @change 事件来监听每次选择 -->
                            <INPUT type="radio" :value="quote.id" v-model="selectedQuote" name="quoteId" @change="handleSelection(quote.id)">
                        </TD>
                        <TD align="middle">{{ quote.id }}</TD>  <!-- 序号 (使用 ID) -->
                        <TD>{{ quote.supplierName }}</TD>  <!-- 供应商名称 -->
                        <TD>{{ quote.overallPrice }}</TD>  <!-- 总额 -->
                        <TD>{{ formatDate(quote.endDate) }}</TD>  <!-- 截止时间 (格式化日期) -->
                    </TR>
                    </TBODY>
                </TABLE>

                <BR>
                <INPUT id=button1 @click="check" type=button value=查看报价 name=button1> &nbsp;
                <INPUT id=button2 onclick="window.history.back()" type=button value=返回 name=button1>
            </CENTER>
        </FORM>
    </DIV>
</CENTER>
</BODY>
<SCRIPT>
    new Vue({
        created(){
            this.selectAllQE();
            this.selectQuote();
            this.findQuote();
        },
        el: '#app',
        data() {
            return {
                item: [],
                quotes: [],
                quoteId: 0,
                quote:{
                    materialCode: '',
                    materialName: '',
                    amount: '',
                    measureUnit: '',
                    endDate: '',
                    sumPrice: '',
                    unitPrice: '',
                },
                enquiry: {
                    enquiryNo: '',
                    enquiryName: '',
                    company: '',
                    contactPerson: '',
                    address: '',
                    phone: '',
                    fax: '',
                    postcode: '',
                    email: '',
                    deadline: '',
                    items: [],
                    validityPeriod: '',
                    remarks: '',
                    materialCode: '',
                    materialName: '',
                    amount: '',
                    measureUnit: '',
                    endDate: '',
                    sumPrice: '',
                    unitPrice: '',
                },
                selectedQuote: null
            };
        },
        methods: {
            check(){
                console.log('ID为:',this.quoteId);
                if(this.quoteId <= 0){
                    alert('请选择一个报价!');
                }else {
                    sessionStorage.setItem('quoteId',this.quoteId);
                    window.location.href = 'baojaoshushuoming.html';
                }
            },
            handleSelection(selectedId) {
                console.log('选中的报价 ID:', selectedId);  // 直接输出选中的报价 ID
                this.quoteId = selectedId;
            },
            findQuote(){
                console.log('findQuote运行了');
                axios.get(`/put/findAllQuote?id=${sessionStorage.getItem('id')}`)
                    .then(response => {
                        const mapData = response.data.data;
                        if (mapData && mapData.length > 0) {
                            this.quotes = mapData.map(item => {
                                return {
                                    id: item.ID,                 // 使用 ID 作为序号
                                    supplierName: item.QUO_COMPANY,  // 供应商公司名称
                                    overallPrice: item.OVERALL_PRICE, // 总金额
                                    endDate: item.END_DATE,          // 截止时间
                                };
                            });
                            console.log(this.quotes);  // 打印所有的报价数据
                        }
                    });
            },
            selectQuote(){
                axios.get(`/put/selectQuoted?id=${sessionStorage.getItem('id')}`)
                    .then(response => {
                        const mapData = response.data.data;
                        this.quote = {
                            materialCode: mapData[0].MATERIAL_CODE,
                            materialName: mapData[0].MATERIAL_NAME,
                            amount: mapData[0].AMOUNT,
                            measureUnit: mapData[0].MEASURE_UNIT,
                            endDate: mapData[0].END_DATE,
                            sumPrice: mapData[0].SUM_PRICE,
                            unitPrice: mapData[0].UNIT_PRICE,
                        }
                    });
            },
            selectAllQE() {
                axios.get(`/put/selectAllQE?id=${sessionStorage.getItem('id')}`)
                    .then(response => {
                        const mapData = response.data.data;
                        console.log(mapData);
                        this.enquiry = {
                            enquiryNo: mapData[0].ENQUIRE_NUM,
                            enquiryName: mapData[0].ENQUIRE_NAME,
                            company: mapData[0].COMPANY,
                            contactPerson: mapData[0].LINKMAN,
                            address: mapData[0].ADDRESS,
                            phone: mapData[0].PHONE,
                            fax: mapData[0].FAX,
                            postcode: mapData[0].ZIP,
                            email: mapData[0].EMAIL,
                            deadline: mapData[0].END_DATE,
                            items: mapData[0].ITEMS,
                            validityPeriod: mapData[0].END_DATE,
                            remarks: mapData[0].REMARK,
                            materialCode: mapData[0].MATERIAL_CODE,
                            materialName: mapData[0].MATERIAL_NAME,
                            amount: mapData[0].AMOUNT,
                            measureUnit: mapData[0].MEASURE_UNIT,
                            endDate: mapData[0].END_DATE,
                            sumPrice: mapData[0].SUM_PRICE,
                            unitPrice: mapData[0].UNIT_PRICE,
                            quotes: [],
                        };
                        console.log(this.enquiry);
                        console.log(this.enquiry.enquiryNo);
                    });
            },
            formatDate(date) {
                const d = new Date(date);
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1
                const day = String(d.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            },
        }
    });
</SCRIPT>
</HTML>